/**
* 设备激活率/设备活跃率
*/

<template>
    <div class="device-activation-content">
        <div class="device-content">
            <div class="title">
                <span class="span-1">{{name}}</span>
            </div>
            <slot name="content"></slot>
            <slot name="timeSelect"></slot>
            <div v-auto-resize style="height: 380px;" ref="chartEl" class="chart-wrap" />
            <!--<div v-show="averageTime">-->
                <!--<slot name="content"></slot>-->
                <!--<div v-auto-resize style="height: 380px;" ref="chartEl1" class="chart-wrap" />-->
            <!--</div>-->
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'

let oChart
let oChart1
export default {
  name: 'ChartStageTrend',
  mixins: [EchartsBase],
  directives: {
    AutoResize
  },
  props: {
    deviceChartData: {
      type: Array
    },
    name: {
      type: String
    },
    averageTime: {
      type: Boolean,
      default: false
    },
    averageTimeData: {
      type: Array
    }
  },
  watch: {
    deviceChartData (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          this.setOption(now)
        })
      }
    },
    averageTimeData (now, old) {
      if (this.averageTime) {
        oChart1 = echarts.init(this.$refs.chartEl1)
        this.setOption2(now)
      }
    }
  },
  created () {
  },
  methods: {
    setOption (data) {
      let xAxisListData = []
      let legendListData = ['存活率', '活跃率']
      let series1ListData = []
      let series2ListData = []
      if (this.name === '使用时间点') {
        legendListData = ['使用次数', '设备数']
        this._.each(data, (item) => {
          xAxisListData.push(item.time)
          series1ListData.push(item.modeCount)
          series2ListData.push(item.deviceCount)
        })
      } else if (this.name === '设备激活率/设备活跃率曲线图') {
        legendListData = ['激活率', '活跃率']
        let activeRateList = data[0].activeRateList
        let registRateList = data[0].registRateList
        this._.each(activeRateList, (item) => {
          xAxisListData.push(item.activeMonth)
          series1ListData.push(Number(item.percent))
        })
        this._.each(registRateList, (item) => {
          series2ListData.push(Number(item.percent))
        })
      }
      let option = {
        backgroundColor: '#ffffff',
        color: ['#2CD9C5', '#8C54FF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: legendListData,
          top: '2%',
          left: '10',
          textStyle: {
            color: '#2125296',
            fontSize: 16
          }
        },
        grid: {
          left: '6%',
          right: '4%',
          top: '15%',
          bottom: '16%',
          containLabel: true
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          x: 'right',
          y: 'center'
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            zoomLock: false,
            start: 0,
            end: 55
          },
          {
            type: 'inside',
            realtime: true,
            zoomLock: false,
            start: 0,
            end: 55
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxisListData,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#212529',
                fontSize: 16
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            'nameTextStyle': {
              'color': '#2CD9C5',
              'fontSize': 16
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#212529',
                fontSize: 16
              }
            }
          }
        ],
        series: [
          {
            name: legendListData[0],
            type: 'line',
            smooth: true,
            showAllSymbol: true, // 显示所有图形。
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 8, // 标记的大小
            itemStyle: {
              normal: {
                areaStyle: {
                  // color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(44,217,197,0.1)'
                  }, {
                    offset: 1,
                    color: 'rgba(44,217,197,0.5)'
                  }])
                }
              }
            },
            data: series1ListData,
            barWidth: '30%'
          }, {
            name: legendListData[1],
            type: 'line',
            smooth: true,
            showAllSymbol: true, // 显示所有图形。
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 8, // 标记的大小
            itemStyle: {
              normal: {
                areaStyle: {
                  // color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(140,84,255,0.1)'
                  }, {
                    offset: 1,
                    color: 'rgba(140,84,255,0.5)'
                  }])
                }
              }
            },
            data: series2ListData,
            barWidth: '30%'
          }
        ]
      }
      oChart.setOption(option)
    },
    setOption2 (data) {
      let xAxisListData = []
      let legendListData = [data[0].mode]
      let series1ListData = []
      this._.each(data, (item) => {
        xAxisListData.push(item.time)
        series1ListData.push(item.average_use_duration_by_mode)
      })
      let option = {
        backgroundColor: '#ffffff',
        color: ['#2CD9C5', '#8C54FF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        'title': {
          'text': '平均工作时长/秒',
          x: '4%',
          textStyle: {
            color: '#2CD9C5',
            fontSize: '14'
          }
        },
        legend: {
          data: legendListData,
          top: '2%',
          left: '10',
          textStyle: {
            color: '#2125296',
            fontSize: 16
          }
        },
        grid: {
          left: '6%',
          right: '4%',
          top: '15%',
          bottom: '16%',
          containLabel: true
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          x: 'right',
          y: 'center'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxisListData,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#212529',
                fontSize: 16
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            'nameTextStyle': {
              'color': '#2CD9C5',
              'fontSize': 16
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#212529',
                fontSize: 16
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            showAllSymbol: true, // 显示所有图形。
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 8, // 标记的大小
            itemStyle: {
              normal: {
                areaStyle: {
                  // color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(44,217,197,0.1)'
                  }, {
                    offset: 1,
                    color: 'rgba(44,217,197,0.5)'
                  }])
                }
              }
            },
            data: series1ListData,
            barWidth: '30%'
          }
        ]
      }
      oChart1.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-activation-content{
        @include device-content;
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
    }

</style>
